<template>
	<view class="indexContainer">
		<!-- 头部手机状态栏 -->
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="navBarActive!=='home'" class="header-phone-stauts-show"></view>
		<!-- #endif -->
		<!-- 页面展示 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="pages-show-container"
			:style="{height:navBarActive==='home'?'calc(100vh - 102rpx)':'height: calc(100vh - 142rpx);'}">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="pages-show-container"
				:style="{height:navBarActive==='home'?'calc(100vh - 102rpx)':'height: calc(100vh - 142rpx);'}">
				<!-- #endif -->
				<Home v-if="navBarActive==='home'"></Home>
				<Menu v-else-if="navBarActive==='menu'"></Menu>
				<Mine v-else-if="navBarActive==='mine'"></Mine>
			</view>
			<!-- 底部导航栏 -->
			<BottomNavBar class='bottomNavBarContainer'></BottomNavBar>
		</view>
</template>

<script>
	import BottomNavBar from '@/components/BottomNavBar/index.vue'
	import Home from '@/pages/home/index.vue'
	import Menu from '@/pages/menu/index.vue'
	import Mine from '@/pages/mine/index.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		components: {
			BottomNavBar,
			Home,
			Menu,
			Mine
		},
		onLoad() {
			// uni.loadFontFace({
			// 	global: true,
			// 	family: 'siyuan',
			// 	source: 'url("/static/fonts/siyuan/SourceHanSansCN-Medium.ttf")',
			// 	success() {
			// 		console.log('引入思源黑体成功')
			// 	},
			// 	fail(e) {
			// 		console.log(e);
			// 	}
			// })
		},
		computed: {
			...mapState({
				navBarActive: store => store.navBarActive
			})
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.indexContainer {
		position: relative;
		width: 100%;
		height: 100vh;

		//微信小程序独有的头部展示
		.header-phone-stauts-show {
			width: 100%;
			height: 40rpx;
			background-color: #f7f7f7;
		}

		.pages-show-container {
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 142rpx);
			/* #endif */
			/* #ifndef MP-WEIXIN */
			height: calc(100vh - 102rpx);
			/* #endif */
			width: 100%;
			overflow-x: hidden;
			overflow-y: auto;
		}

		.bottomNavBarContainer {
			position: fixed;
			width: 100%;
			bottom: 0;
			z-index: 10rpx;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
		}
	}
</style>
